<template>
  <div class="container">
    <el-page-header content="入库支出 "></el-page-header>
    <div class="e-m-t-45 e-m-b-45">
      <el-radio-group v-model="dataType">
        <el-radio-button label="0">收入支出汇总图</el-radio-button>
        <el-radio-button label="1">入库支出</el-radio-button>
        <el-radio-button label="2">出库销售汇总</el-radio-button>
        <el-radio-button label="3">提现金额情况汇总</el-radio-button>
        <el-radio-button label="4">推广支出情况</el-radio-button>
      </el-radio-group>
    </div>
    <div class="flex" style="flex-direction: column;">
      <div class="e-flex-1">
        <div class="admin-statistics-content">
          <div class="item e-flex-1">
            <label>客户送到站点收</label>
            <div class="e-font-18">线下回收量</div>
            <div class="e-m-t-10"><span>{{ fitorderssummary.weight }}</span></div>
          </div>
          <div class="item e-flex-1">
            <label>客户送到站点收</label>
            <div class="e-font-18">线下订单数</div>
            <div class="e-m-t-10"><span>{{ fitorderssummary.ordercount }}</span></div>
          </div>
          <div class="item e-flex-1">
            <label>客户送到站点收</label>
            <div class="e-font-18">线下均单量</div>
            <div class="e-m-t-10"><span>{{ fitorderssummary.averageweight }}</span></div>
          </div>
        </div>
      </div>
      <div class="e-m-t-30">
        <el-form :inline="true" :model="formInline" class="demo-form-inline xuan-box">
          <el-form-item label="切换站点" class="e-flex-1">
            <el-select v-model="stroeid" placeholder="选择站点" :disabled="isUserOrder">
              <el-option v-for="item in stroelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择入库时间">
            <el-date-picker @change="time" :clearable="false" value-format="yyyy-MM-dd" v-model="value1" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getlist()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="downloadwithdrawa()" plain><i class="iconfont icon-excel"></i>导出Excel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <div class="flex align-items-center">
        <h4 class="e-flex-1">查询结果</h4>
        <div>
          <el-radio-group v-model="isUserOrder" @input="getlist">
            <el-radio :label="true">包括未入库订单（不区分站点）</el-radio>
            <el-radio :label="false">仅计算入库订单库存</el-radio>
          </el-radio-group>
        </div>
      </div>
      <el-table ref="multipleTable" tooltip-effect="dark" :data="tableData" @selection-change="handleSelectionChange"
        show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" stripe border
        style="width: 100%; margin-top: 20px">
        <!-- <el-table-column prop="id" label="ID" width="180">
        </el-table-column> -->
        <el-table-column label="品类">
          <el-table-column prop="large" width="180" label="类型">
          </el-table-column>
          <el-table-column prop="name" width="130" label="小类">
          </el-table-column>
        </el-table-column>
        <el-table-column label="数量">
          <el-table-column prop="weight.online" label="线上">
            <template v-slot:header>
              <span>线上</span>
              <el-tooltip class="item" effect="dark" content="小哥回收并入库" placement="top"><span class="el-icon-question e-p-l-4"></span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.weight.online }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="weight.offline" label="线下">
            <template v-slot:header>
              <span>线下</span>
              <el-tooltip class="item" effect="dark" content="站点入库" placement="top"><span class="el-icon-question e-p-l-4"></span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.weight.offline }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="weight.transfers" label="移库">
            <template v-slot:header>
              <span>移库</span>
              <el-tooltip class="item" effect="dark" content="其他站点转移到此站点的数量" placement="top"><span class="el-icon-question e-p-l-4"></span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.weight.transfers }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="weight.total" label="合计">
            <template slot-scope="scope">
              <span>{{ scope.row.weight.total }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="path" width="130" label="均价">
          <template slot-scope="scope">
            <span>{{ scope.row.path }}{{ scope.row.isweighing ? '元/KG' : '元/件' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额（元）">
          <el-table-column prop="amount.online" label="线上">
            <template v-slot:header>
              <span>线上</span>
              <el-tooltip class="item" effect="dark" content="小哥回收时金额" placement="top"><span class="el-icon-question e-p-l-4"></span></el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="amount.offline" label="线下">
            <template v-slot:header>
              <span>线下</span>
              <el-tooltip class="item" effect="dark" content="站点回收金额" placement="top"><span class="el-icon-question e-p-l-4"></span></el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="amount.total" label="合计">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'admin',
  head() {
    return {
      title: '入库支出' ,
    }
  },
  components: {},
  props: {},
  data() {
    return {
      piece:{
        offline:0,
        online:0,
        total:0,
      },
      myweight:{
        offline:0,
        online:0,
        total:0,
      },
      timeType: 0,//时间类型
      loading: true,
      value1: "",//下单时间
      starteate: "",//下单初始
      enddate: "",//下单结束
      dataType: 1,
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],//数据
      multipleSelection: [],//选中数据
      amount: {//金额
      },
      weight: {//总重量
      },
      stroelist: "",//站点数组
      stroeid: 0,//站点id
      fitorderssummary:{
        averageweight: '',
        ordercount: '',
        weight: ''
      },
      isUserOrder: false
    };
  },
  watch: {
    dataType(val) {
      console.log(val)
      if (val == 0) {
        this.$router.push({
          path: '/finance/statistics'
        })
      } else if (val == 1) {
        this.$router.push({
          path: '/finance/receipt/receipt'
        })
      } else if (val == 2) {
        this.$router.push({
          path: '/finance/receipt/outbound'
        })
      } else if (val == 3) {
        this.$router.push({
          path: '/finance/receipt/cash'
        })
      } else if (val == 4) {
        this.$router.push({
          path: '/finance/receipt/promotion'
        })
      }
    }
  },
  computed: {},
  methods: {
    //导出方法
    downloadwithdrawa() {
      this.$axios.post('/Admin/Statistics/StoragePayDownload', {
        "startDate": this.startdate,
        "endDate": this.enddate,
        "storeId": this.stroeid,
        "timeType": this.timeType,
        "IsUserOrder": this.isUserOrder
      }, {
        responseType: 'blob'
      }).then(res => {
        console.log(res)
        let content = res;
        let fileName = '入库支出.xls'
        this.utils.saveAndExport(content, fileName)
      })
    },
    time(e) {
      console.log(e)
      this.startdate = e[0]
      this.enddate = e[1]
      this.timeType = 4

    },
    //合并最后一个合计
    getSummaries(param) {
      const sums = []
      sums[1] = '合计'
      sums[2] = (this.myweight.online).toFixed(2) + 'KG' + ' / ' + this.piece.online + '件'
      
      sums[3] = (this.myweight.offline).toFixed(2) + 'KG' + ' / ' + this.piece.offline + '件'
      sums[4] = (this.myweight.transfers)?.toFixed(2) + 'KG' + ' / ' + this.piece.transfers + '件'
      sums[5] = (this.myweight.total).toFixed(2) + 'KG' + ' / ' + this.piece.total + '件'
      sums[6] = '--'
      sums[7] = this.amount.online
      sums[8] = this.amount.offline
      sums[9] = this.amount.total
      return sums;
      // sums数组的每一个元素代表表格从左到右的列(column)。
    },
    getstroelist() {
      this.$axios.post('/select/storelist', {
        "pageIndex": 1,
        "pageSize": 999,
        "all": true,
      }).then(res => {
        console.log(res)
        this.stroelist = res.rows
        this.stroelist.unshift({
          name: '全部',
          id: 0
        })
      })
    },
    //请求列表
    getlist() {
      this.piece = {
        offline:0,
        online:0,
        total:0,
        transfers: 0
      },
      this.myweight = {
        offline:0,
        online:0,
        total:0,
        transfers: 0
      },
      this.tableData = []
      this.$axios.post('/admin/statistics/storagepay', {
        "startDate": this.startdate,
        "endDate": this.enddate,
        "storeId": this.stroeid,
        "timeType": this.timeType,
        "IsUserOrder": this.isUserOrder
      }).then(res => {
        console.log(res)
        // this.tableData = res.largetype
        this.amount = res.amount
        this.weight = res.weight
        this.fitorderssummary = res.fitorderssummary
        res.largetype.forEach((item, index) => {
          // console.log(item,"==>item", index ,'===>index')
          item.product.forEach((i, x) => {
            let obj = {}
            obj.amount = i.amount
            // obj.averageprice = i.averageprice
            obj.id = i.id
            obj.name = i.name
            obj.path = i.averageprice
            obj.sort = i.sort
            obj.weight = i.weight
            obj.large = item.names
            obj.bigid = item.id
            obj.isweighing = item.isweighing
            this.tableData.push(obj)
            // console.log(i,"==>i", x ,'===>x')
            // console.log(item,"==>item", index ,'===>index')


          })
        })
        // console.log(this.tableData,"thisdata")
        this.tableData.forEach(item => {
          // console.log(item, 'item')
          if(item.isweighing){
            this.myweight.offline += item.weight.offline
            this.myweight.online += item.weight.online
            this.myweight.total += item.weight.total
            this.myweight.transfers += item.weight.transfers
          } else {
            this.piece.offline += item.weight.offline
            this.piece.online += item.weight.online
            this.piece.total += item.weight.total
            this.piece.transfers += item.weight.transfers
          }
        })
        this.loading = false
      })
    },
    //。。。
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }

    },
    //多选中的
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    //合并类型格子
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(rowIndex, columnIndex,'ssss')
      // console.log(row, 'aaaaa')
      let mergeLength = 1;//需要进行横纵合并的列
      if (columnIndex < mergeLength) {
        let finArray = [1, 1];
        // 处理行数据
        let cgname = Object.keys(row)[7]//7是数字最后一项类型id
        if (rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname]) {
          let rowspan = 1;
          //计算需要进行合并操作的行
          for (let i = 0; i < this.tableData.length - 1; i++) {
            // 只合并连续的
            if (this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname]) {
              rowspan++;
            }
          }
          finArray[0] = rowspan;
        } else {
          finArray[0] = 0;
        }
        return finArray
      }
    }
  },
  mounted() {
    this.getlist()
    this.getstroelist()
  }
};
</script>
<style lang="scss" scoped>
  .xuan-box {
    display: flex;
    justify-content: flex-end;

  }
  .admin-statistics-content {
    display: flex;
    background-color: #fff;
    padding: 15px;
    height: calc(100% - 30px);
    border: 1px solid var(--light);

    .item {
      &+.item {
        border-left: 1px solid var(--light);
        padding-left: 30px;
      }

      .icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--light);
        background-color: #f2f3f5;
        padding: 5px;
        margin: 0 20px 0 0;
        box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
      }

      label {
        color: var(--grey);
        font-size: 12px;
        margin-bottom: 5px;
        display: block;
      }

      .num {
        font-size: 30px;
      }
    }
  }
</style>